<template>
<div class="container">
    <div class="header">
        <NavBar title="钱包明细" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <Tabs v-model="active" title-active-color='#333333' title-inactive-color='#999999' color='#5652FF' sticky offset-top='54px' background='#F7F7F7' @change='getList(true)'>
            <Tab title="全部">
                <List v-if='list.length > 0' v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList(false)">
                    <div class="list">
                        <div class="item" v-for='(item,idx) in list' :key='idx'>
                            <div class="tops flex align-items space-between">
                                <span class="spa">{{ item.title }}</span>
                                <span class="spb">{{ item.money }}</span>
                            </div>
                            <div class="time">{{ item.add_time_text }}</div>
                        </div>
                    </div>
                </List>
                <Empty v-show='noData' description="暂无数据" />
            </Tab>
            <Tab title="收入">
                <List v-if='list.length > 0' v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList(false)">
                    <div class="list">
                        <div class="item" v-for='(item,idx) in list' :key='idx'>
                            <div class="tops flex align-items space-between">
                                <span class="spa">{{ item.title }}</span>
                                <span class="spb">{{ item.money }}</span>
                            </div>
                            <div class="time">{{ item.add_time_text }}</div>
                        </div>
                    </div>
                </List>
                <Empty v-show='noData' description="暂无数据" />
            </Tab>
            <Tab title="支出">
                <List v-if='list.length > 0' v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList(false)">
                    <div class="list">
                        <div class="item" v-for='(item,idx) in list' :key='idx'>
                            <div class="tops flex align-items space-between">
                                <span class="spa">{{ item.title }}</span>
                                <span class="spb">{{ item.money }}</span>
                            </div>
                            <div class="time">{{ item.add_time_text }}</div>
                        </div>
                    </div>
                </List>
                <Empty v-show='noData' description="暂无数据" />
            </Tab>
        </Tabs>
       
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    Tabs,
    Tab,
    List,
    Empty,
} from "vant";
import {
    getMoneyMx
} from '@/model/api';
export default {
    components: {
        NavBar,
        Icon,
        Tabs,
        Tab,
        List,
        Empty,
    },
    data() {
        return {
            active: 0,
            loading: false,
            list: [],
            total: 0,
            noData: false,
        };
    },
    methods: {
        async getList(refresh = false) {
            let {
                code,
                data,
                count,
            } = await getMoneyMx({
                start: refresh ? 0 : this.list.length,
                change_type: this.active
            })
            this.loading = false;
            if (code == 1) {
                this.list = refresh ? data : this.list.concat(data);
                this.total = count;
            }
            this.noData = this.list.length == 0;
        }
    },
    created() {
        this.getList();
    },
    computed: {
        finished() {
            return this.list.length == this.total && this.total > 0;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
}

.list {
    width: 100%;
    overflow: hidden;
    height: auto;
    padding: 10px 14px;

    .item {
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #EAEAEA;

        .tops {
            width: 100%;
            margin-bottom: 10px;

            .spa {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #222222;
            }

            .spb {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FF5522;
            }

            .spc {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #222222;
            }
        }

        .time {
            width: 100%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
        }
    }
}
</style>
